<template>
  <div>
    <span id="title"><b>处方流转订单管理</b></span>

    <div id="shaixuan_1">&nbsp;
      <i class="iconfont icon-shaixuan"></i>
      <span slot="title">筛选</span>
    </div>
    <div id="shaixuan_2">
      <div id="text">
        <font>订单编号：</font>
      </div>
      <div id="input">
        <el-input v-model="input"
                  placeholder="请输入订单编号"></el-input>
      </div>
      <div id="date">
        <font>提交时间：</font>
        <el-date-picker v-model="date"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div id="button">
        <el-button type="primary"
                   @click="chose">筛选</el-button>
      </div>
    </div>

    <div id="data_1">&nbsp;
      <i class="iconfont icon-querylist"></i>
      <span slot="title">数据列表</span>
    </div>
    <div id="data_2">
      <div id="data_2_1">
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect">
          <el-menu-item index="0"
                        class="menu">全部</el-menu-item>
          <el-menu-item index="1"
                        class="menu">待支付</el-menu-item>
          <el-menu-item index="2"
                        class="menu">已完成</el-menu-item>
          <el-menu-item index="3"
                        class="menu">已失效</el-menu-item>
        </el-menu>
      </div>
      <div id="data_2_2">
        <PrescriptionOrderData :prescriptionorders="prescriptionorders"
                               @refresh="refresh"></PrescriptionOrderData>
      </div>
      <div id="page">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import PrescriptionOrderData from "./PrescriptionOrderData.vue"
export default {
  name: "PrescriptionOrder",
  components: {
    PrescriptionOrderData
  },

  data () {
    return {
      input: null,
      starttime: '',
      endtime: '',
      activeIndex: '0',
      date: '',
      prescriptionorders: [],
      currentPage: 1,
      pageSize: 10,
      total: 1,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  methods: {
    //日期选择
    chose: function () {
      this.currentPage = 1;
      this.activeIndex = "0";
      //默认输入值为''
      if (this.input == '') {
        this.input = null;
      }
      //刷新后没选择时间时，默认日期为undefined
      if (this.date) {
        let time = this.date;
        this.starttime = time[0];
        this.endtime = time[1];
      }
      //日期清空时，默认日期为null
      if (this.date == null) {
        this.starttime = '';
        this.endtime = '';
      }
      this.findAll();
      this.findTotalCount();
    },
    refresh () {
      this.findAll();
      this.findTotalCount();
    },
    // 根据条件查询所有处方订单
    findAll () {
      this.$axios({
        method: "get",
        url: "/prescriptionOrder/findAll",
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          status: this.activeIndex,
          name: this.input,
          starttime: this.starttime,
          endtime: this.endtime
        }
      }).then((res) => {
        this.prescriptionorders = res.data.data;
      });
    },
    // 根据条件查询处方订单总数
    findTotalCount () {
      this.$axios({
        method: "get",
        url: "/prescriptionOrder/findTotalCount",
        params: {
          status: this.activeIndex,
          name: this.input,
          starttime: this.starttime,
          endtime: this.endtime
        }
      }).then((res) => {
        this.total = res.data.data;
      });
    },
    // 状态选择
    handleSelect (key) {
      this.activeIndex = key;
      this.currentPage = 1;
      this.findAll();
      this.findTotalCount();
    },
    // 每页显示条数
    handleSizeChange (val) {
      this.pageSize = val;
      this.findAll();
    },
    // 当前页码
    handleCurrentChange (val) {
      this.currentPage = val;
      this.findAll();
    }
  },
  created () {
    // 分页查询处方单订单
    this.findAll();
    // 获取处方单订单总数
    this.findTotalCount();
  }
}
</script>

<style scoped>
#title {
  font-size: 30px;
}
#shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 50px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 50px;
  height: 100px;
}

#text {
  margin-top: 40px;
  margin-left: 20px;
  float: left;
}
#input {
  width: 200px;
  margin-top: 30px;
  float: left;
}
#date {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#button {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}

#data_1 {
  /* border: 1px solid red; */
  margin-right: 50px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#data_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 50px;
  overflow: hidden;
}
#data_2_1 {
  /* border: 1px solid red; */
  height: 50px;
}
.menu {
  width: 25%;
  text-align: center;
}
#data_2_2 {
  margin-top: 20px;
}

#all {
  margin-top: 40px;
  margin-left: 30px;
  float: left;
}
#page {
  margin-top: 35px;
  margin-left: 150px;
  float: left;
}
</style>
